<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>个人中心</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="/layui/css/layui.css" media="all"/>

    <script src="/layui/layui.js" charset="utf-8"></script>
</head>

<body>
<%
    if (session.getAttribute("reader") == null) {
        response.sendRedirect("index.jsp");
    }
%>
<blockquote class="layui-elem-quote">
    <label>欢迎"${sessionScope.reader.name}"同学</label><br>
    <label>联系电话：${sessionScope.reader.telephone}</label>
    <a style="color: #ff5722; float: right; margin-right: 50px; font-size: x-large" href="index.jsp">退出登录</a>
</blockquote>

<div class="layui-container">
    <div class="layui-row">
        搜索图书：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button class="layui-btn" style="float: right" onclick="window.location='/borrowBooks.jsp'">去借书</button>
    </div>

    <div class="layui-row form-body">
        <div class="layui-col-md12">
            <table id="demo" lay-filter="test"></table>
        </div>

    </div>
</div>


<%--table--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit">还书</a>
</script>

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        const $ = layui.$;
        const table = layui.table;
        const layer = layui.layer;
        const form = layui.form;

        //表格start
        table.render({
            elem: "#demo",
            height: 530,
            url: "/ShowBorrowDetail", //数据接口
            method: 'POST',
            page: true, //开启分页
            cols: [
                [
                    //表头
                    {field: "name", title: "图书名", width: 200},
                    {field: "price", title: "价格", width: 100},
                    {field: "writer", title: "作者", width: 100},
                    {field: "classify", title: "分类", width: 100},
                    {
                        field: 'returnTime',
                        title: '还书时间',
                        width: 180,
                        sort: false,
                        fixed: false,
                        templet: '<div>{{ layui.laytpl.toDateString(d.returnTime)}}</div>'
                    },
                    {
                        fixed: "right",
                        title: "操作",
                        toolbar: "#barDemo",
                        width: 80,
                    },
                ],
            ],
        });
        //监听行工具事件
        table.on("tool(test)", function (obj) {
            if (obj.event === "edit") {
                layer.confirm("确定要还书么", function (index) {
                    const id = obj.data.bid;
                    console.log(obj.data);
                    $.ajax({
                        url: "/updateBookBorrow?id=" + id + "&state=return",
                        type: "POST",
                        success: function (msg) {
                            if (msg) {
                                obj.del();
                                layer.msg("还书成功", {icon: 6});
                            } else {
                                layer.msg("还书失败", {icon: 5});
                            }
                        },
                        error: function () {
                            layer.msg("还书失败", {icon: 5});
                        }
                    });
                    layer.close(index);
                });
            }
        });

        //时间戳的处理
        layui.laytpl.toDateString = function (d, format) {
            var date = new Date(d || new Date())
                , ymd = [
                this.digit(date.getFullYear(), 4)
                , this.digit(date.getMonth() + 1)
                , this.digit(date.getDate())
            ]
                , hms = [
                this.digit(date.getHours())
                , this.digit(date.getMinutes())
                , this.digit(date.getSeconds())
            ];

            format = format || 'yyyy-MM-dd HH:mm:ss';

            return format.replace(/yyyy/g, ymd[0])
                .replace(/MM/g, ymd[1])
                .replace(/dd/g, ymd[2])
                .replace(/HH/g, hms[0])
                .replace(/mm/g, hms[1])
                .replace(/ss/g, hms[2]);
        };

        //数字前置补零
        layui.laytpl.digit = function (num, length, end) {
            let str = '';
            num = String(num);
            length = length || 2;
            for (let i = num.length; i < length; i++) {
                str += '0';
            }
            return num < Math.pow(10, length) ? str + (num | 0) : num;
        };
    });
</script>
</body>
</html>
